<template>
    <div id='SearchResult'>
        <nav-bar left-arrow left-text="返回" title="搜索结果" @click-left="router.replace('/search')" />
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getResultList">
            <art-item-component v-for="item in resultList" :item="item" :key="item.art_id" />
        </van-list>
    </div>
</template>

<script  setup>import { useRoute, useRouter } from 'vue-router'
import { NavBar, Toast, List as vanList } from 'vant'
import ArtItemComponent from '@/components/ArtItemComponent.vue'
import { getSearchResult } from '@/api'
import { ref } from 'vue'
const router = useRouter()
const route = useRoute()

// list组件
const loading = ref(false)
const finished = ref(false)

const resultList = ref([])
let currentPage = 0
const getResultList = async () => {
    Toast.loading({
        message: '加载中...',
        forbidClick: true
    })
    currentPage++
    loading.value = true
    try {
        const { data: { data: { page, per_page: perPage, results } } } = await getSearchResult(route.params.kw, currentPage)
        resultList.value = [...resultList.value, ...results]
        finished.value = page * perPage > resultList.value.length
        loading.value = false
        Toast.clear()
    } catch {
        Toast.clear()
        Toast.fail('加载失败')
    }
}

</script>

<style lang='less'>
.van-nav-bar__title {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
